<template>
    <div class="bg">
        <el-card class="box-card">
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone" autocomplete="off">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email" autocomplete="off">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idcard" autocomplete="off">
                <el-input v-model="form.idcard"></el-input>
            </el-form-item>          
            <el-form-item style="margin-left: 38px;">
                <el-button type="primary" @click="update" style="margin-right: 80px;">确定修改</el-button>
                <el-button type="primary"  @click="dialogFormVisible = true">修改密码</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-dialog
        title="修改密码"
        :visible.sync="dialogFormVisible"
        width="500px">
            <el-form :model="passwords" ref="passwords" :rules="rules" label-width="100px" style="width: 400px;">
                <el-form-item label="旧密码" prop="oldPassword" show-password >
                    <el-input v-model="passwords.oldPassword" type="password" autocomplete="off" ></el-input>
                </el-form-item> 
                <el-form-item label="请输入新密码" prop="password1" show-password>
                    <el-input v-model="passwords.newPassword" type="password" autocomplete="off"></el-input>
                </el-form-item> 
            
                <el-form-item>
                    <!-- <span slot="footer" class="dialog-footer"> -->
                        <el-button @click="cancel">取 消</el-button>
                        <el-button type="primary" @click="submit('passwords')">确 定</el-button>
                    <!-- </span> -->
                </el-form-item>
                
            </el-form>
        </el-dialog>
    </div>
    
   
</template>

<script>
import { getUser, update } from '@/api/user';
import md5 from 'js-md5'
export default {
    name:'',
    components: {  },
    data() {
       return {
        form:{
            name:'',
            email:'',
            phone:'',
            idcard:'',
        },
        passwords:{
            oldPassword:'',
            newPassword:'',
        },
        
        password:'' ,
        dialogFormVisible: false,
       }
    },
    computed:{
        rules(){
            var validatePass2 = (rule, value, callback) => {
                if(this.passwords.oldPassword == 0){
                    callback();
                }else if (md5(md5(this.passwords.oldPassword)) !== this.password) {
                    callback(new Error('密码输入错误!'));
                } else {
                    callback();
                }
            };
            return{
                name:[
                    {required:true,message:'请输入用户名',trigger:'blur'},
                    {max:6,message:'最多6个字',trigger:'blur'},
                ],
                email:[
                    {required:false,message:'请输入邮箱',trigger:'blur'},
                    {type:'email',message:'请输入正确的邮箱地址',trigger:'blur'},
                ],
                oldPassword:[
                    {validator:validatePass2,trigger:'blur'},
                ]
            }
        }
    },
    methods:{
        tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1) {
              return 'warning-row';
            } else if (rowIndex === 3) {
              return 'success-row';
            }
        return '';
        },
        cancel(){
            this.passwords = {}
            this.dialogFormVisible = false
        },
        
        update(){
            let id = localStorage.getItem('tokenUser')
            let params = {...this.form,id}
            update(params).then((res)=>{
                let {data,code,msg} = res.data
                
                    if(code ==1){
                        this.$message.success(data)
                    }else{
                        this.$.message.error(msg)
                    }
            }).catch(err => {
                this.$message.error('与后端连接失败',err)
            })

        },
        submit(passwords){ 
            let password = md5(this.passwords.newPassword)
           
            update({password}).then(res =>{
                console.log('很要命----提交密码---',res);
                let {data,code,msg} =res.data
                if(code ==1){
                    this.$message.success(data)
                    if(this.passwords.newPassword.length !== 0 &&this.passwords.newPassword !== this.passwords.oldPassword ){
                        this.$message.error("密码已修改请重新登录")
                        this.$router.push({name:'Login'})
                    }
                    this.dialogFormVisible = false
                }
            }).catch(err =>{
                this.$message.error('与后端连接错误',err)
            })
            
        },
        
        
        getList(){
            let userId = localStorage.getItem('tokenUser')
            getUser({params:{userId}}).then(({data}) =>{
                // console.log('user请求到的数据',data);
                if(data.code ===1){
                    this.form.name = data.data.name
                    this.form.email = data.data.email
                    this.form.phone = data.data.phone
                    this.form.idcard = data.data.idcard
                    this.password = data.data.password
                }else{
                    this.$message.error(data.msg)
                }
            }).catch(err=>{
                this.$message.error("出错了：",err)
            })
        }
    },
    
    mounted() {
        // this.oldPassword = md5(this.oldPassword)
        this.getList()
    },

}
</script>

<style lang="less" scoped>
.bg{
    width: 100%;
    height:  calc(100vh - 70px);
    // background: url(@/assets/static/login/001.jpg) no-repeat center/100%;
   .box-card {
    margin-top: 70px;
    width: 560px;
    position: absolute;
    top:40%;
    left:50%;
    transform: translate(-50%,-50%);
  } 
}
  

</style>